<template>
  <view style="padding-bottom: 66rpx">
    <view class="con">
      <image src="../../static/my/ydcc.png" class="logo" mode="aspectFill" />
      <view class="tit">
        <text>{{ fileCount.folderCount }}文件夹</text>
        <text>{{ fileCount.imageCount }}照片</text>
        <text>{{ fileCount.videoCount }}视频</text>
      </view>
    </view>
    <view class="wjjBox">
      <view class="wjjItem1" @click="goNew">
        <image class="tb" src="../../static/my/wjj.png" mode="aspectFill" />
        <view>新建文件夹</view>
      </view>
      <view class="bwjjItem" v-for="(item, index) in list" :key="index" @click="goPicDetils(item)">
        <view class="wjjItem">
          <image class="bg" :src="item.url" mode="aspectFill" />
          <image class="tb" src="../../static/my/wjj.png" mode="aspectFill" />
        </view>
        <view class="tit">{{ item.name }}</view>
        <view class="num">{{ item.count }}张</view>
      </view>
    </view>
    <view class="plus" @click="goPlus"><u-icon name="plus" size="26" color="#fff" bold></u-icon></view>
  </view>
</template>
<script setup lang="ts">
import { filesCount, getFolderList } from "@/api/cloudStorage";
import { useFilesStore } from "@/stores/files";
import { goPage } from "@/utils/commonFn";
//@ts-ignore
import { onShow, onReachBottom } from "@dcloudio/uni-app";
import { ref } from "vue";
const fileCount = ref({
  folderCount: 0,
  imageCount: 0,
  videoCount: 0,
});
const pageStatus = ref("loadmore");
const page = ref(1);
const list = ref<any[]>([]);
onShow(async () => {
  const res1: any = await getFolderList({
    pageNum: page.value,
  });
  list.value = res1.rows;
  const res = await filesCount({});
  fileCount.value = res.data;
});

const getList = async () => {
  if (pageStatus.value == "nomore") {
    return;
  }
  pageStatus.value = "loadmore";
  const res: any = await getFolderList({
    pageNum: page.value,
  });
  list.value = list.value.concat(res.rows);
  if (list.value.length >= (res.total as number)) {
    pageStatus.value = "nomore";
  } else {
    pageStatus.value = "loadmore";
  }
};
onReachBottom(() => {
  page.value++;
  getList();
});
const goPicDetils = async (info: any) => {
  useFilesStore().setFilesInfo(info);
  goPage("/pages/cloudStorage/filesDetails");
};
const goNew = () => {
  useFilesStore().setFilesInfo(null);
  goPage("/pages/cloudStorage/newfiles");
};
const goPlus = () => {
  useFilesStore().setFilesInfo(null);
  goPage("/pages/cloudStorage/sendPicture");
};
</script>
<style lang="less" scoped>
.con {
  background: linear-gradient(155deg, #ccd9fb 0%, #ffffff 100%);
  padding-left: 30rpx;
  padding-right: 30rpx;
  .logo {
    width: 232rpx;
    height: 48rpx;
  }
  .tit {
    font-size: 28rpx;
    color: #3d3d3d;
    margin-top: 24rpx;
    text {
      margin-right: 20rpx;
    }
  }
}

.wjjBox {
  background: #ffffff;
  border-radius: 32rpx 32rpx 0rpx 0rpx;
  margin-top: -20rpx;
  padding: 32rpx 24rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .wjjItem1 {
    width: 48%;
    height: 340rpx;
    background: #eeeeee;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #aaaaaa;
    .tb {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 10rpx;
    }
  }
  .bwjjItem {
    width: 48%;
    margin-bottom: 10rpx;
    .tit {
      font-size: 28rpx;
      color: #3d3d3d;
      margin-top: 10rpx;
    }
    .num {
      font-size: 26rpx;
      color: #767676;
      margin-top: 4rpx;
    }
  }
  .wjjItem {
    width: 100%;
    height: 340rpx;
    position: relative;
    .bg {
      width: 100%;
      height: 100%;
    }
    .tb {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 10rpx;
      position: absolute;
      left: 42rpx;
      top: 38rpx;
      z-index: 33;
    }
  }
}
</style>
